<html>
<head>
    <title>风险责任清单</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        img {
            width: 30px;
            width: 32px;
        }

        td {
            text-align: center;
            height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/
            position: relative;
        }

        td[class=first] {
            width: 100px;
        }

        td[class=first]:before {
            content: "";
            position: absolute;
            width: 1px;
            height: 160px;
            top: 0;
            left: 0;
            background-color: #000;
            display: block;
            transform: rotate(-73deg);
            transform-origin: top;
            -ms-transform: rotate(-73deg);
            -ms-transform-origin: top;
        }

        .title1 {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .title2 {
            position: absolute;
            top: 26px;
            right: 70px;
        }


    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">风险管理 › 风险责任清单</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small" :model="searchForm">
                        <el-form-item label="资料名称">
                            <el-input placeholder="资料名称" style="width: 150px;"
                                      v-model="searchForm.fileName"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="success" @click="addVisible=true">上传<i
                                    class="el-icon-upload el-icon--right"></i></el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="fileName" label="资料名称" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="280">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-delete" @click="delFile(scope.row.Id)">删除
                            </el-button>
                            <el-button type="primary" @click="downFile(scope.row)">下载<i
                                    class="el-icon-upload el-icon--right"></i></el-button>
                        </template>

                    </el-table-column>
                </el-table>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="searchForm.pagesize"
                                   :total="searchForm.totalCount"
                                   :current-page.sync="searchForm.pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
    <el-dialog title="上传资料" :visible="addVisible" :show-close="false" width="40%">
        <el-form ref="addForm" :model="addForm" label-width="80px">
            <el-form-item label="资料名称" prop="fileName" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="addForm.fileName"></el-input>
            </el-form-item>
            <el-form-item label="资料文档">
                <el-upload
                        class="upload-demo"
                        ref="upload"
                        name="file"
                        :action="ossUrl"
                        :data="ossForm"
                        :headers="headers"
                        :on-change="file_change"
                        :on-remove="file_remove"
                        :on-success="file_success"
                        :limit="1"
                        :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>

                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addVisible=false" size="small" type="info">取消</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
        </div>
    </el-dialog>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>

<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            tableData: [],
            addForm: {
                fileName: '',
            },
            searchForm: {
                pagesize: 10,
                totalCount: 10,
                pageno: 1,
            },
            addVisible: false,
            headers: {
                refer:'http://iot.hzcando.com',
            },
            ossUrl: '',
            file_flag: false,
            file:'',
            ossForm:{

            },
        },
        methods: {
            search: function () {
                this.getFile();
            },
            onChangePage(page) {
                this.searchForm.pageno = page;
                this.getFile();
            },
            file_change(file) {
                this.file_flag = true;
                this.file = file;
            },
            file_remove() {
                this.file_flag = false;
                this.file = '';
            },
            submitUpload() {
                if (!this.addForm.fileName) {
                    this.$message.warning('请输入资料名称');
                    return;
                }
                if (!this.file_flag) {
                    this.$message.warning('文件不能为空');
                    return;
                }
                let signParam = {
                    dir:'root/trainImage/',
                    accessMode:0,
                    bucket : "kdimage20200722"
                }

                HttpUtil.get('System/signUrl',signParam).success((signR)=>{
                    this.ossForm = {
                        OSSAccessKeyId:signR.data.accessid,
                        policy:signR.data.policy,
                        Signature:signR.data.signature,
                        key:signParam.dir+ jsonUtil.guid() +'.'+ this.file.name.split('.')[1],
                        success_action_status:200
                    }
                    this.ossUrl = 'https://'+ signR.data.host;
                    setTimeout(()=>{
                        this.$refs.upload.submit();
                    },300)

                })
            },
            file_success() {
                this.addForm.filePath ='oss://'+this.ossForm.key,
                HttpUtil.getV2('Training/FileUpload',this.addForm).success((r)=>{
                    if (r.state == 0){
                        this.$message.success('文件上传成功');
                        this.$refs.upload.clearFiles();
                        this.addForm.fileName = '';
                        this.addVisible = false;
                        this.getFile();
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '出错了!' + r.errMsg
                        });
                    }
                })
            },
            getFile() {
                HttpUtil.get('Training/FileList', this.searchForm).success((r) => {
                    this.tableData = r.data;
                    this.searchForm.totalCount = r.total;
                })
            },
            downFile(row) {
                if (row.filePath.indexOf('http') != -1) {
                    window.location = row.filePath;
                }else {
                    window.location = SiteConfig.webApiset + row.filePath;
                }

            },
            delFile(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    HttpUtil.getV2('Training/FileDelete', {Id: id}).success((r) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getFile();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }
        },
        created: function () {
            let proNo = HttpUtil.getQueryString('projectNo');
            if (proNo) SiteConfig.account.projectNo = proNo;
            let id = HttpUtil.getQueryString('id');
            if (proNo) SiteConfig.account.id = id;
            this.addForm.projectNo = SiteConfig.account.projectNo;
            this.searchForm.projectNo = SiteConfig.account.projectNo;
            this.getFile();
        },
        mounted: function () {
        }
    });


</script>

</body>
</html>
